import { ref, watch, watchEffect } from "vue";

// Options Api vs Composition Api
// 字面上, 选项 API 和 组合 API, 这反映了设计面向的改变:
// 1. 选项, 谁的选项, 关键在谁? 组件, 也是 Vue 2.x的设计基础, 组件有什么,有状态,有改变状态的方法,有生命周期,还有组件和组件之间的关系,这种情况下,'数据'要接受一定的规矩,
//    什么时候能做什么事情,什么时候有什么表现,这个模式下, 开发模式像是 被动接受
// 2. 组合, 什么组合,关键在'什么'? 数据, 数据的组合, Vue 3.x 设计重点变了, 数据变成绝对的C了,

// useStorage  类似 useXXX 库 将数据封装成响应式对象
export const useStorage = (name: string, value = []) => {
  let data = ref(JSON.parse(localStorage.getItem(name)) || value);
  watchEffect(() => {
    localStorage.setItem(name, JSON.stringify(data.value));
  });
  return data;
};

export const useFavicon = (newIcon) => {
  const favicon = ref(newIcon);

  const updateIcon = (icon) => {
    document.head
      .querySelectorAll(`link[rel*="icon"]`)
      .forEach((el) => (el.href = `${icon}`));
  };
  const reset = () => (favicon.value = "/favicon.ico");
  watch(favicon, (icon) => {
    updateIcon(icon);
  });
  return { reset, favicon };
};
